<div class="container-fluid" id="tableSysnot">
	<h4 class="c-grey-900 mT-10 mB-30" th:text="#{sysnot.admin.title}"></h4>
	<div class="row">
		<div class="col-md-12">
			<div class="bgc-white bd bdrs-3 p-20 mB-20">
				<h4 class="c-grey-900 mB-20" th:text="#{table.sysnot.title}"></h4>
				<table id="sysnotTable" class="table table-striped table-bordered" 
					cellspacing="0" width="100%">
					<thead>
						<tr>
							<!-- Columna oculta para el identificador del aviso de sistema -->
							<th></th>
							<th th:text="#{table.sysnot.isok}"></th>
							<th th:text="#{table.sysnot.type}"></th>
							<th th:text="#{table.sysnot.priority}"></th>
							<th th:text="#{table.sysnot.origin}"></th>
							<th th:text="#{table.sysnot.description}"></th>
							<th th:text="#{table.sysnot.creation}"></th>
							<th th:text="#{table.sysnot.expiration}"></th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
</div>

<script th:inline="javascript">

$(document).ready(function() {
	
	$('#idpending').hide();

	var loadconfirmDiscardSysnot = /*[[@{/loadconfirmdiscardsysnot}]]*/;
	var actionDelete = /*[[@{/deletesysnot}]]*/;
	var actionCheck = /*[[@{/checksysnot}]]*/;
	var getsysnot = /*[[@{/sysnotificationdatatable}]]*/;
	
	var tbl = $('#sysnotTable').DataTable({
		 // Se ordena por el campo level de la prioridad
		"order": [4,'asc'],	
		dom: 'Bfrtip',
	    select: 'multi',
	    responsive: true,
	    altEditor: true,
	    buttons: [{extend: 'selected',text: 'Descartar',name: 'descartar',
	    	action: function ( e, dt, node, config ) {
				
				loading();
				
				// Se obtienen las filas seleccionadas
				var d = dt.rows({
                    selected: !0
                })
                
                // Se obtienen los identificadores correspondientes a las filas seleccionadas
				// Se obtienen los índices de las filas seleccionadas 
                var ids = [];
				var indexes = [];
				hide();
                for (var i=0;i<d.data().length;i++) {
                	indexes.push(d.indexes()[i]);
                	ids.push(d.data()[i].idSystemNotification);
                }
                
                $.ajax(loadconfirmDiscardSysnot,{
        			data:$.param({'ids':ids.join(), 'indexes':indexes.join()}),
        	        type:'POST',
        	        success: function(data){
        	    		// Se oculta la capa 'cargando...'
        	    		hide();
        	    		$('#modal').html(data);
        				$('#modalDiscardSysNot').modal('show');
        	        },
        	        error:function(data){
        	        	// Se oculta la capa 'cargando...'
        	        	hide();
        	        
        			}
        		});
                
                /* $.ajax(actionDelete,{
                	data:$.param({'ids':ids.join(), 'indexes':indexes.join()}),
                    type:'POST',
                    success: function(data){
                        		                	
                    	// Se oculta la capa 'cargando...'
                    	hide();
                        
    					for (var i=0;i<data.length;i++) {
    						tbl.draw();
    					}
    						                    
                        $('#altEditor-modal .modal-body .alert').remove();
                        $('#altEditor-modal').modal('hide');
                    },
                    error:function(){}
                }); */
                
			  }
	      },
	      {extend: 'selected',text: 'Visto',name: 'visto',
	    	  action: function ( e, dt, node, config ) {
	    		  loading();
					
					// Se obtienen las filas seleccionadas
					var d = dt.rows({
	                    selected: !0
	                })
	                
	                // Se obtienen los identificadores correspondientes a las filas seleccionadas
					// Se obtienen los índices de las filas seleccionadas 
	                var ids = [];
					var indexes = [];
					hide();
	                for (var i=0;i<d.data().length;i++) {
	                	indexes.push(d.indexes()[i]);
	                	ids.push(d.data()[i].idSystemNotification);
	                }
	                
	                
	                
	                $.ajax(actionCheck,{
	                	data:$.param({'ids':ids.join(), 'indexes':indexes.join()}),
	                    type:'GET',
	                    success: function(data){
	                        		                	
	                    	// Se oculta la capa 'cargando...'
	                    	hide();
	                        
	    					for (var i=0;i<data.length;i++) {
	    						tbl.draw();
	    					}
	    						                    
	                        $('#altEditor-modal .modal-body .alert').remove();
	                        $('#altEditor-modal').modal('hide');
	                    },
	                    error:function(){}
	                });
	    	  }
	      }
	    ],
	
	    "iTotalRecords": "totalElements",
        "iTotalDisplayRecords": "numberOfElements",
	    
		"processing": true,
	    "serverSide": true,
		"ajax": {
	        "url": getsysnot,
	        "dataSrc" : "data"
	        
	      },
	    "language": {
	        "url": "js/datatables/i18n/spanish.json",
	        select: {
	            rows: {
	                _: "%d filas seleccionadas",
	                1: "1 fila seleccionada"
	            }
	          }
	        },
		"columns": [
	        { "data": "idSystemNotification",
	          "visible": false},
	        { "data": "isOk",
		      "render": function(data, type, row){
		     	  var is_checked = data == true ? "checked" : "";
			      return '<div class="checkbox checkbox-circle checkbox-info peers ai-c"><input disabled type="checkbox" id="sysnotTable" class="peer"'+ is_checked + '><label for="sysnotTable" class="peers peer-greed js-sb ai-c"><span class="peer peer-greed" ></span></label></div>';
		      }
		    }, 
	        { "data": "notificationType.tokenName" },
	        { "data": "notificationPriority.tokenName" },
	        { "data": "notificationOrigin.tokenName" },
	        { "data": "description"},
	        
	        { "data": "creationDate",
	          "render": function(data, type, row){
	                if(type === "sort" || type === "type"){
	                    return data;
	                }
	                return moment(data).format("DD-MM-YYYY HH:mm:ss");
	            }
	        },
	        { "data": "expirationDate",
	          "render": function(data, type, row){
	                if(type === "sort" || type === "type"){
	                    return data;
	                }
	                
	                if (data != null) {
	                	return moment(data).format("DD-MM-YYYY HH:mm:ss");
	                } else {
	                	return "Sin caducidad"
	                }
	            }
	        }
	        ]
		});
});	



</script>